<template>
  <view class="content">
    <u-sticky :h5NavHeight="0">
      <!-- #ifndef MP-TOUTIAO -->
      <singleHeader pageTitle="分类"></singleHeader>
      <!-- #endif -->
      
      <pageFilter :BatchProcessing="BatchProcessing"></pageFilter>
    </u-sticky>

    <view class="pageList">
      <pageList :BatchProcessing="BatchProcessing" :items="list"> </pageList>
    </view>

    <toolsMore :status="moreStatus"></toolsMore>
    <pagePopForm :item="item" ref="pagePopForm"></pagePopForm>
    <pagePopMenu ref="pagePopMenu"></pagePopMenu>

    <view class="tools-pof">
      <view class="BatchProcessing" v-if="BatchProcessing">
        <view class="let">
          <checkbox-group @change="changeAll">
            <label class="label">
              <checkbox class="checkbox" :checked="isAll" color="#fff" />
              <text>全部</text>
            </label>
          </checkbox-group>
        </view>

        <view class="rig">
          <u-button
            :customStyle="customStyle"
            :hoverStartTime="hoverStartTime"
            @click="batchUpdate('remove')"
            >批量删除</u-button
          >
        </view>
      </view>
      <view class="btn" v-else>
        <u-button
          :customStyle="{
            background: '#F0250E',
            color: '#fff',
            borderRadius: '32px',
          }"
          :hoverStartTime="hoverStartTime"
          @click="$refs.pagePopForm.showPopup = true"
        >
          新建分类
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import pageFilter from "./components/page-filter.vue";
import pageList from "./components/page-list.vue";
import pagePopForm from "./components/page-pop-form.vue";
import pagePopMenu from "./components/page-pop-menu.vue";
import toolsMore from "@/components/tools/tools-more.vue";
import {
  storeAdminCatList,
  storeAdminSetCatStatus,
  storeAdminCatSave,
} from "@/api/admin";

export default {
  components: {
    singleHeader,
    pageFilter,
    pageList,
    pagePopForm,
    pagePopMenu,
    toolsMore,
  },

  data() {
    return {
      customStyle: {
        background: "#F0250E",
        color: "#fff",
        borderRadius: "32px",
        display: "inline-block",
        height: "72rpx",
        lineHeight: "72rpx",
        marginLeft: "16rpx",
      },

      hoverStartTime: 1000000,

      list: [],
      moreStatus: 1,

      BatchProcessing: false,
      isAll: false,

      item: null,
    };
  },

  computed: {},

  watch: {
    list: {
      handler(list) {
        this.getIsAll(list);
      },
      deep: true,
    },
  },

  onLoad() {
    this.$utils.hideShareMenu();
  },

  mounted() {
    this.Emit.$on("filter", this.indexFilter);
    this.Emit.$on("handleChecked", this.handleChecked);
    this.Emit.$on("submitCategory", this.submitCategory);
    this.Emit.$on("handleMenu", this.handleMenu);
    this.clearData();
  },

  destroyed() {
    this.Emit.$off("filter");
    this.Emit.$off("handleChecked");
    this.Emit.$off("submitCategory");
    this.Emit.$off("handleMenu");
  },

  methods: {
    getIsAll(list) {
      let newList = this.$utils.flatten(list, "children");

      if (newList.every((el) => el.checked)) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
    },

    batchUpdate(type) {
      let newList = this.$utils.flatten(this.list, "children");
      if (!newList.some((el) => el.checked)) {
        this.$utils.toast("请选择数据！");
        return;
      }

      switch (type) {
        case "remove":
          this.storeAdminSetCatStatus(
            newList
              .filter((el) => el.checked)
              .map((el) => el.id)
              .join(","),
            2
          );
          break;
      }
    },

    handleMenu(type) {
      let { item, $refs } = this,
        { pagePopForm, pagePopMenu } = $refs;

      switch (type) {
        case "edit":
          pagePopForm.form = {
            parent_id: item.parent_id,
            parent_name: item.parent_name,
            name: item.name,
            is_show: item.is_show === "1" ? true : false,
            id: item.id,
            pic_url: [
              {
                url: item.pic_url,
              },
            ],
          };
          pagePopMenu.showPopup = false;
          pagePopForm.showPopup = true;
          break;

        case "remove":
          this.storeAdminSetCatStatus(item.id, 2);
          break;
      }
    },

    handleChecked(type, item) {
      let { pagePopForm, pagePopMenu } = this.$refs;
      this.item = item;

      switch (type) {
        case "add":
          pagePopForm.form = {
            parent_id: item.id,
            parent_name: item.name,
            is_show: true,
            name: "",
            pic_url: [],
          };
          pagePopForm.showPopup = true;
          break;

        case "menu":
          pagePopMenu.showPopup = true;
          break;

        case "checked":
          let checked = !item.checked;
          this.getCheckedItem(item, checked);
          break;
      }
    },

    getCheckedItem(item, checked) {
      this.$set(item, "checked", checked);

      if (item.children && item.children.length) {
        item.children.forEach((el) => {
          this.$set(el, "checked", checked);
          this.getCheckedItem(el, checked);
        });
      }
    },

    submitCategory(data) {
      let { pagePopForm, pagePopMenu } = this.$refs;

      storeAdminCatSave(data)
        .then((res) => {
          pagePopForm.disabled = false;
          this.$utils.toast(res.msg);
          if (res.code === 0) {
            this.clearData();
            pagePopForm.clearForm();
            pagePopForm.showPopup = false;
            pagePopMenu.showPopup = false;
            return;
          }
        })
        .catch(() => {
          pagePopForm.disabled = false;
        });
    },

    indexFilter() {
      this.BatchProcessing = !this.BatchProcessing;
    },

    clearData() {
      this.list = [];
      this.BatchProcessing = false;

      this.storeAdminCatList();
    },

    changeAll() {
      this.isAll = !this.isAll;
      let { list } = this;

      list.forEach((el) => {
        this.getCheckedItem(el, this.isAll);
      });
    },

    storeAdminSetCatStatus(id, status) {
      this.$utils.showModal(
        "提示",
        "是否删除?",
        true,
        () => {
          storeAdminSetCatStatus({
            id,
            status,
          }).then((res) => {
            if (res.code === 0) {
              this.clearData();
              this.$refs.pagePopMenu.showPopup = false;
            }

            this.$utils.toast(res.msg);
          });
        },
        () => {}
      );
    },

    storeAdminCatList() {
      storeAdminCatList()
        .then((res) => {
          this.moreStatus = 3;
          if (res.code === 0) {
            this.list = res.data;
          }
        })
        .catch(() => {});
    },
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.title {
  height: 66rpx;
  background: #fff;
}

.box {
  height: 200vh;
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  padding: 10rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
}

.BatchProcessing {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .let {
    font-size: 32rpx;
    color: #262626;
  }
}

.pageList {
  padding: 0 12rpx;
  border-radius: 20rpx;
}

.checkbox .wx-checkbox-input,
.checkbox .uni-checkbox-input {
  border-radius: 100rpx;
}

::v-deep {
  .uni-checkbox-input {
    border-radius: 50%;
    transform: scale(0.7);
  }

  .uni-checkbox-input-checked {
    border-color: #f0250e !important;
    background: #f0250e;
    color: #fff !important;
  }

  // #ifdef  MP-WEIXIN
  checkbox .wx-checkbox-input {
    border-radius: 50% !important;
    color: #ffffff !important;
    transform: scale(0.7);
  }

  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff;
    background: #f0250e;
    border-color: #f0250e !important;
  }
  // #endif

  // #ifdef  MP-ALIPAY
  .checkbox{
    border:0;
    margin-right: 20rpx;
  }

  .label{
    display: flex;
    align-items: center;
  }

  .checkbox::before {
    content: '';
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  checkbox-checked::before{
    width: 40rpx;
    height: 40rpx;
    background: #f0250e;
    border: none;
  }
  // #endif
}
</style>
